<template>
  <el-form label-width="100px" v-show="visible" class="movieDetail">
    <div class="title">编辑电影详情</div>
    <!--电影名称-->
    <el-form-item label="电影名称">
      <span>{{ movieDetail.name }}</span>
    </el-form-item>
    <!--英文名称-->
    <el-form-item label="英文名称">
      <el-input
        type="text"
        placeholder="请输入英文名称"
        v-model="movieDetail.englishName"
        style="width: 25%"
      ></el-input>
    </el-form-item>
    <!--电影类型-->
    <el-form-item label="电影类型">
      <el-select v-model="movieDetail.type" multiple placeholder="请选择">
        <el-option
          v-for="item in types"
          :key="item.value"
          :label="item.label"
          :value="item.label"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <!--电影演员-->
    <el-form-item label="电影主演">
      <span>{{actors}}</span>
    </el-form-item>
    <!-- 上映时间及地点 -->
    <el-form-item label="上映时间地点" inline>
      <el-date-picker
        v-model="dateTime"
        type="datetime"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm"
        placeholder="选择日期时间"
      >
      </el-date-picker>
      <el-input type="text" v-model="address" style="width: 25%" placeholder="上映地点"/>
    </el-form-item>
    <!-- 时长 -->
    <el-form-item label="放映时长">
      <el-slider v-model="duration" :min="60*1" :max="240*1" show-input>
      </el-slider>
    </el-form-item>
    <!-- 评分 -->
    <el-form-item label="电影评分">
      <span>{{ movieDetail.evaluate.pingfen }}</span>
    </el-form-item>
    <!--电影简介-->
    <el-form-item label="电影简介">
      <el-input
        resize="none"
        type="textarea"
        placeholder="请输入电影简介"
        rows="4"
        v-model="movieDetail.intro"
      ></el-input>
    </el-form-item>
    <!--电影图片-->
    <el-form-item label="电影图片">
      <el-image
        style="width: 100px; height: 100px"
        :src="movieDetail.movieImg"
        fit="fill"
      ></el-image>
    </el-form-item>
    <!--两个按钮-->
    <el-form-item>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="back">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "movieDetail",
  props: ["visible"],
  data() {
    return {
      // 电影类型可选项
      types: [
        {
          value: "选项1",
          label: "悬疑",
        },
        {
          value: "选项2",
          label: "爱情",
        },
        {
          value: "选项3",
          label: "科幻",
        },
        {
          value: "选项4",
          label: "喜剧",
        },
        {
          value: "选项5",
          label: "剧情",
        },
        {
          value: "选项6",
          label: "历史",
        },
        {
          value: "选项7",
          label: "战争",
        },
        {
          value: "选项8",
          label: "冒险",
        },
      ],
      // 电影详情
      movieDetail: {
        movieImg: "", //电影图片
        name: "", //电影名称
        englishName: "", //英文名
        type: [], //电影类型
        actors: [], //主演
        time: "", //上映时间和地点
        duration: "", //时长
        evaluate: {
          pingfen: "", //评分
        },
        intro: "", //简介
      },     
      // 上映时间
      dateTime: "",
      // 上映地点
      address: "",
      // 时长
      duration: 60,
      info: {},//电影列表页传过来的电影信息
      isAdd: false//是否为添加详情
    };
  },
  computed:{
    actors(){
      return this.movieDetail.actors.join(',')
    }
  },
  methods: {
    // 初始化数据
    async initData(movieId,info){
      const result = await this.$API.movie.getMovieDetail(movieId)
      if(result.code !== 200){
        this.$message.error('获取详情失败')
        return
      }
      // 获取成功,更新数据
      if(Array.isArray(result.movieDetail)){
        if(result.movieDetail.length){
          // 返回的是数组,且长度不为0
          this.movieDetail = result.movieDetail[0]
          this.isAdd = false
        }
        else{
          // 返回空数组(新添加的电影,还未添加详情)
          this.movieDetail = {
            id: info.id,
            movieImg: info.img, //电影图片
            name: info.nm, //电影名称
            englishName: "", //英文名
            type: [], //电影类型
            actors: info.star.split(','), //主演
            time: "", //上映时间和地点
            duration: "", //时长
            evaluate: {
              pingfen: info.sc, //评分
            },
            intro: "", //简介
          }
          this.isAdd = true
        }
      }else{
        // 返回的是对象
        this.movieDetail = result.movieDetail;
        this.isAdd = false
      }
      // 获得电影信息数据
      this.movieDetail.movieImg = info.img;
      this.movieDetail.name = info.nm
      this.movieDetail.actors = info.star.split(',')
      this.movieDetail.evaluate.pingfen = info.sc

      // 获取时间,日期和时长
      const {time,duration} = this.movieDetail;
      let index = time.lastIndexOf(":")
      this.dateTime = time.substring(0,index+2)
      this.address = time.substring(index+3,index+7)
      this.duration = Number(duration.substring(-3,3)) || 60
    },
    // 保存修改
    async save(){
      if(this.address.trim().length!==4){
        this.$message.warning('上映地点请输入4个字符')
        return
      }
      if(!this.dateTime){
        this.$message.warning('请输入上映时间')
        return
      }
      // 整理数据
      this.movieDetail.time = `${this.dateTime}${this.address.trim()}上映`;
      this.movieDetail.duration = `${this.duration}分钟`
      const {id,...data} = this.movieDetail;
      // 发请求
      let result;
      if(this.isAdd){
        // 添加详情
        result = await this.$API.movie.addMovieDetail({id,data})
      }else{
        // 修改详情
        result = await this.$API.movie.editMovieDetail({id,data})
      }
      // 如果失败
      if(result.code !== 200){
        this.$message.error('操作失败,请重新尝试')
        return
      }
      // 如果成功
      this.$message.success('操作成功')
      // 通知列表页成功
      this.$emit('saveSuccess')
      // 此界面关闭
      this.back()
    },
    // 取消
    back() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style scoped>
.movieDetail .title{
  margin: 20px 20px;
}
</style>